<template>
  <div class="maintain-layout">
    <snackbar style-color="#4A4A4A"
              back-color="#FAFAFA"
              status-color="#FAFAFA"
              style="background: #FAFAFA !important"
              rightText="搜索"
              :fixed="true">
    </snackbar>

    <div class="individua">
      <div class="in">
        <div class="in-top">
          <div class="in-nei"><span>碧桂园</span></div>
          <div class="in-name"><span>王宝强</span></div>
        </div>
        <div class="in-in">
          <span>土方运输费用：</span>
          <span>¥ 400,000</span>
        </div>
      </div>

      <div class="ins" v-for="(item,index) in dataArray" :key="index">
        <div class="ins-ins">
          <div class="ins-ins-div">
            <span>{{ item.date }}</span>
            <span>{{ item.dateTime }}</span>
            <span class="ins-tu">{{ item.earthwork }}</span>
          </div>
          <div class="ins-ins-divs">
            <span>从</span>
            <span>{{ item.add }}</span>
            <span>至</span>
            <span>{{ item.address }}</span>
            <span>小计：</span>
            <span>¥{{ item.money }}</span>
          </div>
          <div class="hengxian"></div>
        </div>
        <span class="details">详情</span>
      </div>
    </div>

    <div class="bottom-layout">
      <span class="add-btn">项目情况</span>
      <span class="add-span">|</span>
      <span class="add-span">|</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Individua',
  data() {
    return {
      dataArray: [
        {
          date: '2021-5-31',
          dateTime: '10:10.35',
          earthwork: '土方运输',
          add: '九头山',
          address: '官塘',
          money: '200'
        },
        {
          date: '2021-5-31',
          dateTime: '10:10.35',
          earthwork: '土方运输',
          add: '九头山',
          address: '官塘',
          money: '200'
        },
        {
          date: '2021-5-31',
          dateTime: '10:10.35',
          earthwork: '土方运输',
          add: '九头山',
          address: '雒容',
          money: '200'
        },
        {
          date: '2021-5-31',
          dateTime: '10:10.35',
          earthwork: '土方运输',
          add: '九头山',
          address: '雒容',
          money: '200'
        },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.maintain-layout {
  width: 100%;
  height: 100vh;
  background: #F6F6F6;

  .individua {
    width: 100%;
    height: 87vh;
    overflow:scroll;
    //background: #00a2ff;
  }
  .in {
    width: 92%;
    height: 17vh;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
    border-radius: 4px;
    border: 0px solid rgba(222, 222, 222, 0.31);
    display: flex;
    flex-direction: column;
    margin: 20px auto 20px auto ;

    .in-top {
      width: 94%;
      height: 10vh;
      margin-left: 3%;
      display: flex;
      align-items: center;
      position: relative;

      .in-nei {
        width: 26%;
        height: 4vh;
        line-height: 4vh;
        text-align: center;
        background: #65C368;
        color: #FFFFFF;
        border-radius: 2px;
        font-family: "苹方-简 中黑体"
      }

      .in-name {
        margin-left: 15%;
        font-size: 0.5rem;
      }
    }

    .in-in {
      display: flex;
      margin-left: 5%;


      span:nth-child(1) {
        color: #B4B4B4;
        font-size: 0.4rem;
      }

      span:nth-child(2) {
        color: #333333;
        font-size: 0.5rem;
        margin-left: 2%;
      }
    }
  }

  .ins {
    width: 92%;
    height: 17vh;
    background: #FFFFFF;
    box-shadow: 0px 0px 6px 1px rgba(121, 121, 121, 0.3);
    border-radius: 4px;
    border: 0px solid rgba(222, 222, 222, 0.31);
    flex-direction: column;
    //margin-left: 4%;
    margin: 15px auto;

    .details {
      width: 15%;
      height: 3vh;
      line-height: 3vh;
      background: #FFFFFF;
      display: inline-block;
      color: #65C368;
      border-radius: 3px;
      border: 1px solid #65C368;
      text-align: center;
      font-size: 0.4rem;
      float: right;
      margin: 20px 4% 0 0;
    }

    .hengxian {
      width: 100%;
      //margin-right: 14px;
      height: 1px;
      background-color: rgba(201, 201, 201, 0.5);
      margin-top: 10px;
    }

    .ins-ins {
      width: 94%;
      height: 10vh;
      margin: 0 auto;

      .ins-ins-div {
        height: 6vh;
        span {
          display: inline-block;
          font-size: 0.4rem;
          margin-top: 18px;
          bottom: 0px;
          color: #B4B4B4;
        }

        span:nth-child(2) {
          color: #333333;
          margin-left: 5%;
        }

        span:nth-child(3) {
          float: right;
          margin-right: 3%;
        }
      }

      .ins-ins-divs {
        height: 4vh;
        margin-left: 2%;
        span {
          margin-top: 10px;
          display: inline-block;
          font-size: 0.4rem;
          line-height: 4vh;
          color: #B4B4B4;
        }

        span:nth-child(2) {
          color: #333333;
          margin: 0 1%;
        }

        span:nth-child(4) {
          color: #333333;
          margin-left: 1%;
        }

        span:nth-child(5) {
          margin-left: 25%;
        }

        span:nth-child(6) {
          color: #333333;
        }
      }
    }
  }

  .bottom-layout {
    position: fixed;
    bottom: 0px;
    width: 100vw;
    height: 8vh;
    display: flex;
    flex-direction: row;

    span {
      flex: 1;
      height: 8vh;
      background: #FFFFFF;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 0.4rem;
      color: #28C1C6;
    }

    .add-btn {

    }

    .add-span {
      justify-content: left;
    }
  }


}
</style>
